<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="lib/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="button" value="动" @click="lang"/>
			<input type="button" value="静" @click="stop"/>
			<h4>{{msg}}</h4>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",
				data:{
					msg:'这是跑马灯的测试内容，使用vue实现',
					intervalId:null
				},
				methods:{
					lang(){
						if(this.intervalId != null) return false;
						this.intervalId = setInterval(()=>{
							var start = this.msg.substring(0,1)
							var end = this.msg.substring(1)
							this.msg = end + start;
						},500)
					},
					stop(){
						clearInterval(this.intervalId)
						this.intervalId = null;
					}
				}
			})
		</script>
	</body>
</html>
